<template>
	<view>
		<!-- 1.0 搜索框 -->
		<search />
		<!-- #ifdef MP-WEIXIN -->
		<!-- <button>小程序端的按钮</button> -->
		<!-- #endif -->
		<!-- #ifdef H5 -->
		<!-- <button>网页端的按钮</button> -->
		<!-- #endif -->
		<!-- 2.0 轮播图分区 -->
		<swiper class="swiper" 
			indicator-dots 
			indicator-color="rgba(255,255,255,.5)"
			indicator-active-color="#fff"
			autoplay
			circular
			:interval="2500"
		>
			<!-- 列表渲染 -->
			<swiper-item v-for="item in swiperData" :key="item.goods_id">
				<!-- 添加页面链接，需建立对应的页面 -->
				<navigator :url="item.navigator_url" :open-type="item.open_type">
					<!-- 图片绑定 -->
					<image class="swiper_image" :src="item.image_src" />
				</navigator>
			</swiper-item>
		</swiper>
		<!-- 3.0 入口导航 -->
		<view class="entry">
			<navigator 
				v-for="item in entryData" 
				:key="item.name" 
				class="entry_item"
				:open-type="item.open_type"
				:url="item.navigator_url"
			>
				<image class="entry_item_image" :src="item.image_src" />
			</navigator>
		</view>
		<!-- 4.0 楼层 -->
		<view v-for="(item, index) in floorData" :key="index" class="floor">
			<view class="floor_title">
				<image class="floor_title_image" :src="item.floor_title.image_src" />
			</view>
			<view class="floor_list">
				<!-- 把图片处理成同级，方便后期列表渲染 -->
				<navigator 
					v-for="item2 in item.product_list" :key="item2.name" 
					class="floor_list_item" 
					:url="item2.navigator_url"
					:open-type="item2.open_type"
				>
					<image 
						class="floor_list_image" 
						:src="item2.image_src" 
						:style="'width:'+ item2.image_width +'rpx'"
					/>
				</navigator>
			</view>
		</view>
	</view>
</template>

<script>
	import search from "@/components/search/main";
	// uni-app 行为写这里
	export default {
		components:{
			search
		},
		data() {
			return {
				swiperData:[],
				entryData:[],
				floorData:[],
			}
		},
		onLoad() {
			// #ifdef MP-WEIXIN
			// console.log('小程序端的JS代码1111111111');
			// #endif
			/* #ifdef H5 */ 
			// console.log('网页端的JS代码2222222222');
			/* #endif */
			// 调用获取轮播图数据
			this.getSwiperData();
			this.getEntryData();
			this.getFloorData();
			// console.log(this.$https);
		},
		// uni-app 事件写到 methods 中
		methods: {
			// 获取轮播图数据
			async getSwiperData(){
				// v3.0 版 返回值已经通过响应拦截器处理过，可用直接使用到数据，通过 await 获取到数据直接赋值即可
				this.swiperData = await this.$https.get('/home/swiperdata');
				// v2.0 版 化简请求地址
				// this.$https.get('/home/swiperdata').then(res=>{
				// 	// const { meta, message } = res.data;
				// 	// if(meta.status === 200){
				// 	// 	this.swiperData = message;
				// 	// }else{
				// 	// 	console.log('请求失败');
				// 	// }
				// });

				// v1.0 发送网络请求
				// uni.request({
				// 	url: 'https://api-hmugo-web.itheima.net/api/public/v1/home/swiperdata', 
				// 	success: (res) => {
				// 		// console.log(res.data);
				// 		const { meta, message } = res.data;
				// 		if(meta.status === 200){
				// 			this.swiperData = message;
				// 			// console.log(this.swiperData);
				// 		}else{
				// 			console.log('请求失败');
				// 		}
				// 	}
				// });
			},
			async getEntryData(){
				// 化简后：只需要关心 1.请求地址和 2.数据的名称
				this.entryData = await this.$https.get('/home/catitems');
				// 发送网络请求
				// uni.request({
				// 	url: 'https://api-hmugo-web.itheima.net/api/public/v1/home/catitems', 
				// 	success: (res) => {
				// 		const { meta, message } = res.data;
				// 		if(meta.status === 200){
				// 			this.entryData = message;
				// 		}else{
				// 			console.log('请求失败');
				// 		}
				// 	}
				// });
			},
			async getFloorData(){
				// 化简后：只需要关心 1.请求地址和 2.数据的名称
				this.floorData = await this.$https.get('/home/floordata');
				// 发送网络请求
				// uni.request({
				// 	url: 'https://api-hmugo-web.itheima.net/api/public/v1/home/floordata', 
				// 	success: (res) => {
				// 		const { meta, message } = res.data;
				// 		if(meta.status === 200){
				// 			this.floorData = message;
				// 		}else{
				// 			console.log('请求失败');
				// 		}
				// 	}
				// });
			},
		}
	}
</script>

<style lang="less">
	/* #ifdef H5 */
	page{
		background-color: #fff;
	}
	/* #endif */
	// 2.0 轮播图
	.swiper{
		width: 750rpx;
		height: 340rpx;
		.swiper_image{
			width: 750rpx;
			height: 340rpx;
		}
	}
	// 3.0 入口导航
	.entry{
		display: flex;
		padding: 10rpx 0;
		// justify-content: space-around;
		justify-content: space-evenly;
		.entry_item{
			// flex:1;
			display: flex;
			justify-content: center;
			align-items: center;
			.entry_item_image{
				width: 128rpx;
				height: 140rpx;
			}
		}
	}
	.floor {
		.floor_title {
			.floor_title_image {
				width: 750rpx;
				height: 60rpx;
			}
		}

		.floor_list {
			// 清除子元素浮动带来的影响
			overflow: hidden;
			.floor_list_item{
				// 浮动实现环绕效果
				float: left;
				&:nth-child(1) image{
					height: 386rpx;
				}
			}
			.floor_list_image {
				display: block;
				width: 232rpx;
				height: 188rpx;    
				margin-left: 14rpx;
    		margin-bottom: 10rpx;
				
			}
		}
	}
</style>
